<template>
  <div>
    <h1>发送ajax请求</h1>
    <button @click="handlerGet">get请求</button>
    <button @click="handlerPost">post请求</button>
    <button @click="handlerPut">put请求</button>
    <button @click="handlerPatch">patch请求</button>
    <button @click="handlerDelete">delete请求</button>
  </div>
</template>
<script>
export default {
  methods: {
    handlerGet() {
      // 获取全部数据
      // this.$http({
      //   url: "http://localhost:3000/stus",
      // }).then((result) => {
      //   console.log(result);
      // });
      // 通过id 获取请求
      this.$http({
        // 真是的访问地址即使 baseURL + url
        baseURL: "http://localhost:3000",
        url: "/stus",
        // get 或者delete 请求参数携带的位置
        params: {
          id: 1002,
        },
        // 响应拦截
        transformResponse: [
          function (data) {
            // console.log(data);
            // 对 data 进行任意转换处理
            return JSON.parse(data);
          },
        ],
        // 设置请求头 自定义请求头
        // headers:{
        //   "x-token":"admin"
        // }
      }).then((result) => {
        console.log(result);
      });
    },
    handlerPost() {
      this.$http({
        url: "http://localhost:3000/stus",
        method: "post",
        // post/patch/put 携带的参数
        data: {
          id: "1005",
          name: "小强",
          age: 18,
        },
        // 请求拦截
        transformRequest: [
          function (data, headers) {
            console.log(headers);
            // 拦截的数据是一个json的数据{} 传递的数据应该是key value的形式
            // let params = ""

            // Object.entries(data).forEach(([key,value]) => {
            //   params += `&${key}=${value}`
            // })
            // if(params) {
            //   params = params.substring(1)
            // }
            // // 对 data 进行任意转换处理
            // console.log(params);
            // 请求头是一个application/json 的格式
            // 请求的过程改变参数
            data.age = data.age + 10;
            return JSON.stringify(data);
          },
        ],
      }).then((result) => {
        console.log(result);
      });
    },
    handlerPut() {
      this.$http({
        url: "http://localhost:3000/stus/1005",
        method: "put",
        // post/patch/put 携带的参数
        data: {
          name: "小强1",
        },
      }).then((result) => {
        console.log(result);
      });
    },
    handlerPatch() {
      this.$http({
        url: "http://localhost:3000/stus/1005",
        method: "patch",
        // post/patch/put 携带的参数
        data: {
          name: "小强1",
        },
      }).then((result) => {
        console.log(result);
      });
    },
    handlerDelete() {
      this.$http({
        url: "http://localhost:3000/stus/1005",
        method: "delete",
      }).then((result) => {
        console.log(result);
      });
    },
  },
};
</script>

<style></style>
